<template>
  <div class="food-item-wrap">
    <router-link :to="{path: '/detail', query: {field: 'food', id: foodInfo.id}}">
      <div class="food-img-wrap">
        <img :src="foodInfo.img" />
      </div>

      <div class="food-info-wrap">
        <h1 class="food-name">{{foodInfo.name}}</h1>
        <star :star-info="{star:foodInfo.star,default_price:foodInfo.default_price}"></star>

        <div class="keyworlds">
          <span class="keyword" v-for="k in splitKeyWorld">{{k}}</span>
        </div>

        <div class="food-category">
          <span class="food-field">{{foodInfo.field}}</span>
          <span class="food-address">{{foodInfo.city_name}}</span>
        </div>
      </div>
    </router-link>
  </div>
</template>

<script>
  import Star from 'components/ScrollWrapper/Sub/Star.vue';

  export default {
    name: 'FoodItem',
    props: {
      foodInfo: Object
    },
    components: {
      Star
    },
    computed: {
      splitKeyWorld() {
        this.foodInfo.keyword && (this.foodInfo.keyword = this.foodInfo.keyword.split(','));
        return this.foodInfo.keyword;
      }
    }
  }
</script>

<style lang="scss" scoped="scoped">
  @import '~styles/mixins.scss';
  @import '~styles/variables.scss';

  img {
    width: 1.2rem;
    height: 1.2rem;
  }

  .food-item-wrap a{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #DDDDDD;
    padding: .1rem 0;

    .food-img-wrap {
      width: 1.2rem;
      height: 1.2rem;
      padding: .1rem;
    }

    .food-info-wrap {
      position: relative;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      height: 1.2rem;
      width: 100%;
      padding-right: .1rem;
      box-sizing: border-box;

      .food-name {
        @include ellipsis;
        font-size: .18rem;
        padding: .1rem 0;
      }

      .keyworlds {
        display: flex;
        flex-direction: row;
        overflow: hidden;
        margin-top: .2rem;
        @include ellipsis;

        .keyword {
          font-size: .14rem;
          margin-left: .05rem;
          line-height: .18rem;
          color: #be9e4d;
          background-color: #fbf4e4;
        }
      }

      .food-category {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        position: absolute;
        bottom: 0;

        span {
          font-size: .14rem;
        }

        .food-address{
          margin-right: .1rem;
        }
      }

    }

  }
</style>
